<template>
    <div class="back">
		名字：<input type="text" v-model="searchCondition.name">
		手机号：<input type="text" v-model="searchCondition.phone">
		<button @click="search">搜索</button>
		<el-table :data="adminList" style="width: 100%">
			<el-table-column fixed prop="id" label="ID" width="150" />
			<el-table-column prop="name" label="名字"  />
			<el-table-column prop="password" label="密码"  />
			<el-table-column prop="phone" label="手机号" />
			<el-table-column fixed="right" label="Operations" min-width="120">
				<template #default>
					<el-button link type="primary" size="small" @click="handleClick">
						Detail
					</el-button>
					<el-button link type="primary" size="small">Edit</el-button>
				</template>
			</el-table-column>
		</el-table>
<!--        <table border="1" cellspacing="0">
            <tr>
                <td>ID</td>
                <td>名字</td>
                <td>密码</td>
                <td>手机号</td>
            </tr>
			<tr v-for="admin of adminList" :key="admin.id">
				<td>{{admin.id}}</td>
				<td>{{admin.name}}</td>
				<td>{{admin.password}}</td>
				<td>{{admin.phone}}</td>
			</tr>
        </table>-->
    </div>
	<div class="back">
		<div class="mb-4">
			<el-button>Default</el-button>
			<el-button type="primary">Primary</el-button>
			<el-button type="success">Success</el-button>
			<el-button type="info">Info</el-button>
			<el-button type="warning">Warning</el-button>
			<el-button type="danger">Danger</el-button>
		</div>
		<div>
			<el-button :icon="Search" circle />
			<el-button type="primary" :icon="Edit" circle />
			<el-button type="success" :icon="Check" circle />
			<el-button type="info" :icon="Message" circle />
			<el-button type="warning" :icon="Star" circle />
			<el-button type="danger" :icon="Delete" circle />
		</div>
	</div>
</template>

<script setup name="Admin">
    import {reactive, ref} from 'vue'
	//import axios from 'axios'
	import {adminApi} from '@/api/admin.js'
    import {
        Check,
        Delete,
        Edit,
        Message,
        Search,
        Star,
    } from '@element-plus/icons-vue'

	let adminList = ref([])
	//搜索条件
	let searchCondition = reactive({
		name: '',
		phone: ''
	})

	/*axios.get('http://localhost:8080/admin/list').then(response => {
        console.log(response.data)
		let result = response.data;
        if (result.code == 0) {
            adminList.value = result.data
		}
	}).catch(error => {

	})*/

	search()

	function search() {
        /*axios.get('http://localhost:8080/admin/list', {params: searchCondition}).then(response => {
            console.log(response.data)
            let result = response.data;
            if (result.code == 0) {
                adminList.value = result.data
            }
        }).catch(error => {

		})*/
		adminApi.list(searchCondition).then(result => {
            if (result.code == 0) {
                adminList.value = result.data
            }
		})

    }





</script>

<style scoped>
    .back {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }

    li {
        font-size: 20px;
    }
</style>